import React, { Component } from 'react'
import Header from "../../components/Header/Header"
import { Link } from 'react-router-dom'
import axios from "axios"
export default class home extends Component {
 constructor(){
  super()
  this.state={
    cates:[
      {id:1,catename:"家用电器"},
      {id:2,catename:"美妆护肤"},
      {id:3,catename:"运动健身"}
    ],
    goods:[
      {
        id:1,goodsname:"手机1",price:20
      },
      {
        id:2,goodsname:"手机2",price:30
      },
      {
        id:3,goodsname:"手机3",price:29.9
      },
    ]
  }
 }
 componentDidMount(){
   axios({url:"/api/api/getcate"}).then(res=>{
     console.log(res);
   })
 }
  render() {
    let {cates} = this.state
    let {goods} = this.state
    return (
      <div>
          <Header title="首页"></Header>
          <ul>
            {
              cates.map(item =>{
                return <li key={item.id}>
                  <Link to={"/list?id="+ item.id}>{item.catename}</Link>
                </li>
              })
            }
          </ul>
          <hr />
          <h3>商品列表</h3>
          <ol>
            {
              goods.map(item =>{
                return <li key={item.id} style={{margin:"0.2rem",background:"pink"}}>
                    <Link to={"/detail/"+item.id}>
                      <div>{item.goodsname}</div>
                      <div>{item.price}</div>
                    </Link>
                </li>
              })
            }
          </ol>
      </div>
    )
  }
}
